<template>
  <div class="collection-goods-container">
    <ul class="collection-goods" v-if="collectionGoods.length>0">
      <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
        >
        <li class="collection-li" v-for="(goods,index) in collectionGoods" :key="index" @click="linkToDetail(goods)">
          <van-card
            :title="goods.title"
            :thumb="goods.pic_path"
          >
            <div slot="tags">
              <div class="price-con">
                <!-- <span class="price fontGilroy">¥<em>50.00</em></span> -->
                <span class="price" v-html="scaleGoodsPriceFn(goods.price)"></span>
                <s class="original-price">{{goods.original_price}}</s>
              </div>
              <a href="javascript:;" class="collect-del" @click.stop="handleCancel(goods.item_id)">取消收藏</a>
            </div>
          </van-card>
        </li>
      </van-list>
    </ul>
    <div v-else>
      <no-data :noData=noData></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getCollectionGoods, cancelCollectionGoods } from '@/api/user/member/memberApi'
import { scaleGoodsPrice } from '@/utils/index.js'
import noData from '@/components/noData/index'
import { Card } from 'vant'
Vue.use(Card)
export default Vue.extend({
  name: 'index',
  components: {
    noData
  },
  data() {
    return {
      noData: {
        width: '184px',
        marginTop: '100px',
        txtMarginTop: '-30px',
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_collection_goods.png',
        text: '暂无收藏的商品'
      },
      present_price_name: '现价',
      collectionGoods: [
        /* {
          item_id: '111111',
          is_compress: 0,
          pic_path: 'http://img.wifenxiao.com/16/79/6/2019-11/5dc4d6812c64b.jpg',
          link: '',
          title: '商品名称',
          price: '11.12',
          original_price: '11.11'
        } */
      ],
      loading: false,
      finished: false,
      error: false,
      p: 2
    }
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    init(params) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getCollectionGoods(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (res.data.lists && res.data.lists.length > 0) {
            res.data.lists.forEach(item => {
              if (item.is_compress) {
                item.pic_path += '80x80'
              }
              // console.log(item.pic_path)
            })
          }
          this.collectionGoods = res.data.lists
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 取消收藏
    handleCancel(id) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      const params = {
        id: id
      }
      cancelCollectionGoods(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('操作成功')
          this.init()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onLoad() {
      this.loading = true
      if (this.finished) { return false }
      const data = {
        p: this.p
      }
      getCollectionGoods(data)
        .then(res => {
          this.loading = false
          if (res.data.lists && res.data.lists.length) {
            res.data.lists.forEach(item => {
              if (item.is_compress) {
                item.pic_path += '80x80'
              }
            })
            this.collectionGoods.push(...res.data.lists)
            this.p++
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    },
      // 跳转商品详情页
    linkToDetail(item) {
      // 小程序不支持跳转外链 只支持跳转pages下的页面
      // let link = ''
      // if (item.buy_method == 2) {
      //   link = item.buy_url
      // } else {
      //   link = item.link_item
      // }
      // window.location.href = link
      // console.log(item)
      let linkUrl = '/item-detail?' + item.link.split('?')[1]
      window.open(linkUrl)
    },
  },
  created() {
    const params = {}
    this.init(params)
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
})
</script>

<style lang="scss">
.collection-goods-container{
  .no-data .h5-img{
    width: 49%!important;
  }
  .collection-goods{
    padding:0 0 20px;
    .collection-li{
      padding:0 20px;
      background:#fff;
    }
    .van-card{
      padding:30px 0;
      border-radius:0;
      border-bottom:1px solid #eee;
      .van-image{
        img{
          border-radius:12px;
        }
      }
    }
    .price-con{
      margin:12px 0;
    }
    .price{
      font-size:20px;
      color:#ff5a00;
      em{
        font-size:32px;
        font-weight:bold;
      }
    }
    .original-price{
      margin-left:6px;
      font-size:24px;
      color:#999;
    }
    .collect-del{
      display:inline-block;
      height:44px;
      line-height:42px;
      padding:0 20px;
      border:1px solid #e6e6e6;
      border-radius:44px;
      color:#999;
      font-size: 24px;
    }
  }
}
</style>